<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>11_盒子模型-内容区-块级元素默认内容宽度</title>
        <style>
            /* （1）没有发生盒子嵌套的内容宽度 */
            /* div {
                width: 100px;
                height: 100px;
                background-color: red;
            } */

            /* （2）块级元素的默认总宽度 = 父元素内容区域的宽度 - 该块级元素的左右外边距 */
            #d1 {
                width: 600px;
                height: 400px;
                background-color: red;
            }

            #d2 {
                height: 200px;
                background-color: green;
                margin-left: 20px;
                margin-right: 20px;
            }

            /* （3） 块级元素内容区域的默认宽度 =  父元素内容区域的宽度 - 该块级元素的左右外边距 - 该块级元素的左右边框宽度 - 该块级元素的左右内边距。 */
            /* #outer {
                width: 600px;
                height: 400px;
                background-color: aquamarine;
            } */

            /* #inner {
                height: 300px; */
                /* 如果里面的盒子什么都没有设置 那么宽默认是父元素的宽 */

                /* 如果里面的盒子设置了左右外边距 那么
                块级元素内容区域的默认宽度 =  父元素内容区域的宽度 - 该块级元素的左右外边距
                */
                /* margin-left: 20px;
                margin-right: 20px; */

                /* 如果里面的盒子设置了左右边框  那么 
                块级元素内容区域的默认宽度 =  父元素内容区域的宽度 - 该块级元素的左右外边距 - 该块级元素的左右边框宽度*/
                /* border-left: 10px solid black;
                border-right: 10px solid black; */

                /* 块级元素内容区域的默认宽度 =  父元素内容区域的宽度 - 该块级元素的左右外边距 - 该块级元素的左右边框宽度 - 该块级元素的左右内边距 */
                /* padding-left: 20px;
                padding-right: 20px;
                background-color: red; */
            /* } */
        </style>
    </head>
    <body>
        <!-- （1）没有发生盒子嵌套的内容宽度 -->
        <!-- <div>
        </div> -->

        <!-- （2）块级元素的默认总宽度 = 父元素内容区域的宽度 - 该块级元素的左右外边距  -->

        <div id="d1">
            <div id="d2">
            </div>
        </div>

        <!-- （3） 块级元素内容区域的默认宽度 =  父元素内容区域的宽度 - 该块级元素的左右外边距 - 该块级元素的左右边框宽度 - 该块级元素的左右内边距。-->
        
        <!-- <div id="outer">
            <div id="inner"></div>
        </div> -->
    
    
    </body>
</html>